<template>
<div>
    <div id="echartsDemo" style="width: 300px;height: 500px;"></div>
    <!-- <el-calendar  v-model="value" style="width: 250px;"></el-calendar> -->

</div>

    
</template>
<script>
import {getChatRoomList,getUserList} from '../../util/api.js'
  export default {
    data () {
      return {
        roomcount:0,
        usercount:0,
        value: new Date()
        
      }
    },
    methods: {
       async init () {
        //得到聊天室数目
        const result =await this.$http.post(getChatRoomList,
          {
            'token':this.token
          }
          );
            console.log(result)
            if(result.status!==200) return this.$message.console.error("获取数据失败！");
            this.roomcount=result.data.bool.length
            this.$message.success("获取数据成功")        

        //得到用户数目
        const res =await this.$http.post(getUserList,
          {
            'token': this.token
          }
          );
            console.log(res)
            if(res.status!==200) return this.$message.console.error("获取数据失败！");
            this.usercount=res.data.list.length
            this.$message.success("获取数据成功")  

    //展示数目
      let elementById = document.getElementById('echartsDemo')
      let echartsDemo = this.$echarts.init(elementById)
      let option = {
        title: {
          text: '用户总量'
        },
        tooltip: {},
        legend: {
          data: ['数目']
        },
        xAxis: {
          data: ['聊天室', '用户']
        },
        yAxis: {},
        series: [{
          name: '数目',
          type: 'bar',
          data: [this.roomcount, this.usercount],
          showBackground: true,
        //   backgroundStyle: {
        //     color: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
        // }
        }]
      }
      echartsDemo.setOption(option)
    },
    },
    mounted () {
      this.token= window.sessionStorage.getItem('token')
      this.init()
    }
  }
  
</script>

<style lang="less" scoped>

</style>